<template>
    <div id="menu">
      <ul>
        <!-- <li><span @click="allArticle('front-article')">前端技术</span></li> -->
        <!-- <li><span @click="allArticle('gui-article')">图形技术</span></li> -->
        <li><span @click="allArticle('Tips-article-qzkf')">全栈开发</span></li>
        <li><span @click="allArticle('Tips-article-ztbj')">杂谈笔记</span></li>
        <li><span @click="allArticle('main')">所有文章</span></li>
      </ul>
    </div>
</template>
<script>
export default {
  mounted () {
  },
  methods: {
    allArticle (arg) {
      this.$router.push('/index')
      this.$store.dispatch('setRigthPage', arg)
    }
  }
}
</script>
<style scoped>
#menu ul li{
  font-size:1.4rem;
  color:#696969;
  font-weight: 300;
  padding: .5rem 0;
}
#menu span{
  cursor: pointer;
}
#menu span:hover{
  color: #7b5d5f;
  text-shadow: 1px 1px 10px red;
}
@media screen and (max-width: 800px) {
  #menu {
    padding:0;
  }
  #menu span{
    font-size: 1rem;
  }
}
</style>
